<template>
  <view class="modify-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <text>←</text>
      </view>
      <view class="header-title">修改预定</view>
    </view>
    
    <!-- 修改内容选择 -->
    <view class="modify-section">
      <view class="section-title">选择修改的内容</view>
      
      <!-- 日期修改 -->
      <view class="modify-option">
        <view class="option-title">日期修改</view>
        
        <view class="date-fields">
          <view class="date-field">
            <text class="field-label">入住时间</text>
            <uni-datetime-picker 
              type="date" 
              :value="checkInDate" 
              @change="checkInDateChange"
              class="date-picker-component">
              <view class="date-display">
                <text>{{ checkInDate || '请选择日期' }}</text>
                <text class="icon">📅</text>
              </view>
            </uni-datetime-picker>
          </view>
          
          <view class="date-field">
            <text class="field-label">离店时间</text>
            <uni-datetime-picker 
              type="date" 
              :value="checkOutDate" 
              @change="checkOutDateChange"
              :start="checkInDate"
              class="date-picker-component">
              <view class="date-display">
                <text>{{ checkOutDate || '请选择日期' }}</text>
                <text class="icon">📅</text>
              </view>
            </uni-datetime-picker>
          </view>
        </view>
      </view>
      
      <!-- 联系电话 -->
      <view class="modify-option">
        <view class="option-title">联系电话</view>
        <input type="number" class="input-field" v-model="phoneNumber" placeholder="请输入联系电话" maxlength="11" />
      </view>
      
      <!-- 住客信息 -->
      <view class="modify-option">
        <view class="option-title">住客</view>
        
        <view class="guest-fields" v-for="(guest, index) in guests" :key="index">
          <view class="room-label">房间{{ index + 1 }}</view>
          <input type="text" class="input-field" v-model="guest.name" placeholder="请输入住客姓名" />
        </view>
      </view>
    </view>
    
    <!-- 确认按钮 -->
    <view class="confirm-btn-section">
      <button class="confirm-btn" @click="confirmModify">确定</button>
    </view>

    <!-- 修改预定成功弹窗 -->
    <uni-popup ref="modifySuccessPopup" type="bottom" background-color="rgba(0,0,0,0.5)" class="modify-success-popup">
      <view class="modify-popup-content">
        <view class="popup-success-icon">
          <text>✓</text>
        </view>
        <view class="popup-title">修改预定信息成功</view>
        
        <view class="popup-info">
          <view class="popup-info-item">
            <text class="popup-info-label">房间号</text>
            <text class="popup-info-value">{{roomNumber || '201'}}</text>
          </view>
          <view class="popup-info-item">
            <text class="popup-info-label">房间类型</text>
            <text class="popup-info-value">{{displayRoomType}}</text>
          </view>
          <view class="popup-info-item">
            <text class="popup-info-label">入住时间</text>
            <text class="popup-info-value">{{checkInDate}}</text>
          </view>
          <view class="popup-info-item">
            <text class="popup-info-label">离店时间</text>
            <text class="popup-info-value">{{checkOutDate}}</text>
          </view>
          <view class="popup-info-item">
            <text class="popup-info-label">联系电话</text>
            <text class="popup-info-value">{{phoneNumber}}</text>
          </view>
        </view>
        
        <button class="popup-btn" @click="goToHome">返回首页</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

// 修改信息数据
const checkInDate = ref('2025-04-09');
const checkOutDate = ref('2025-04-16');
const phoneNumber = ref('433343535');
const guests = ref([
  { name: 'frkrww', phone: '' }
]);
const originalData = ref({});
const roomNumber = ref('201');

// 弹窗引用
const modifySuccessPopup = ref(null);

// 计算房间类型显示
const displayRoomType = computed(() => {
  return originalData.value.roomType || '单人间';
});

// 从页面参数中获取数据
onMounted(() => {
  const eventChannel = getOpenerEventChannel();
  eventChannel.on('modifyData', (data) => {
    if (data) {
      originalData.value = data;
      checkInDate.value = data.startDate || checkInDate.value;
      checkOutDate.value = data.endDate || checkOutDate.value;
      
      if (data.guests && data.guests.length > 0) {
        guests.value = data.guests.map(guest => ({
          name: guest.name,
          phone: guest.phone || ''
        }));
      }
      
      // 如果没有电话号码，设置默认电话
      if (data.phoneNumber) {
        phoneNumber.value = data.phoneNumber;
      }
    }
  });
});

// 返回按钮功能
const goBack = () => {
  uni.navigateBack();
};

// 日期选择变更
const checkInDateChange = (e) => {
  checkInDate.value = e;
  // 如果离店日期早于入住日期，自动调整离店日期
  if (checkOutDate.value && new Date(checkOutDate.value) < new Date(e)) {
    // 设置离店日期为入住日期后一天
    const nextDay = new Date(e);
    nextDay.setDate(nextDay.getDate() + 1);
    checkOutDate.value = formatDate(nextDay);
  }
};

const checkOutDateChange = (e) => {
  checkOutDate.value = e;
};

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 返回首页
const goToHome = () => {
  // 关闭弹窗
  modifySuccessPopup.value.close();
  
  // 使用 reLaunch 确保跳转到首页
  uni.reLaunch({
    url: '/pages/index/index',
    success: () => {
      console.log('成功跳转到首页');
    },
    fail: (err) => {
      console.error('跳转失败：', err);
      // 如果 reLaunch 失败，尝试使用 navigateTo
      uni.navigateTo({
        url: '/pages/index/index'
      });
    }
  });
};

// 确认修改
const confirmModify = () => {
  // 验证输入
  if (!checkInDate.value || !checkOutDate.value) {
    uni.showToast({
      title: '请选择入住和离店日期',
      icon: 'none'
    });
    return;
  }
  
  if (!phoneNumber.value) {
    uni.showToast({
      title: '请输入联系电话',
      icon: 'none'
    });
    return;
  }
  
  for (const guest of guests.value) {
    if (!guest.name) {
      uni.showToast({
        title: '请输入住客姓名',
        icon: 'none'
      });
      return;
    }
  }
  
  // 显示加载中
  uni.showLoading({
    title: '提交中...'
  });
  
  // 模拟网络请求
  setTimeout(() => {
    uni.hideLoading();
    
    // 准备预览数据
    const previewData = {
      roomNumber: roomNumber.value,
      roomType: displayRoomType.value,
      checkInDate: checkInDate.value,
      checkOutDate: checkOutDate.value,
      phoneNumber: phoneNumber.value,
      guests: guests.value
    };
    
    // 跳转到预览页面
    uni.navigateTo({
      url: '/pages/accommodation/preview',
      success: (res) => {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('previewData', previewData);
      }
    });
  }, 1000);
};

// 获取事件通道
const getOpenerEventChannel = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const eventChannel = currentPage.getOpenerEventChannel();
  return eventChannel;
};
</script>

<style lang="scss">
.modify-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  max-width: 750rpx;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 40rpx;
}

// 头部导航
.header {
  position: relative;
  height: 90rpx;
  background: linear-gradient(to right, #1E90FF, #4682B4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .back-icon {
    position: absolute;
    left: 30rpx;
    font-size: 40rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

// 修改内容区域
.modify-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx 0;
  
  .section-title {
    font-size: 30rpx;
    color: #333;
    padding: 0 30rpx 20rpx;
    font-weight: bold;
  }
  
  .modify-option {
    border-top: 15rpx solid #f5f5f5;
    padding: 20rpx 30rpx;
    
    .option-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    
    .input-field {
      width: 100%;
      height: 80rpx;
      background-color: #f9f9f9;
      border-radius: 8rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: #333;
    }
    
    .date-fields {
      .date-field {
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .field-label {
          font-size: 26rpx;
          color: #999;
          display: block;
          margin-bottom: 10rpx;
        }
        
        .date-picker-component {
          width: 100%;
          
          .date-display {
            height: 80rpx;
            background-color: #f9f9f9;
            border-radius: 8rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28rpx;
            color: #333;
            
            .icon {
              color: #999;
            }
          }
        }
      }
    }
    
    .guest-fields {
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .room-label {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 10rpx;
      }
    }
  }
}

// 确认按钮
.confirm-btn-section {
  padding: 40rpx 30rpx;
  
  .confirm-btn {
    background: linear-gradient(to right, #1E90FF, #4682B4);
    color: #ffffff;
    height: 90rpx;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    border: none;
  }
}
</style>

<style>
/* 移动端预览样式 */
@media screen and (min-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
  
  uni-page-body {
    max-width: 375px !important;
    margin: 0 auto !important;
    position: relative !important;
    min-height: 100vh !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  /* 弹窗移动端样式 */
  .modify-success-popup .uni-popup__wrapper {
    max-width: 375px !important;
    width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
  }
  
  /* 遮罩层样式 */
  .uni-popup__mask {
    z-index: 998 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  /* 底部弹窗样式 */
  .uni-popup .uni-popup__wrapper-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 375px !important;
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  
  /* 弹窗内容适配移动端预览宽度 */
  .modify-popup-content {
    max-width: 375px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 30rpx 20rpx 40rpx !important;
  }
  
  /* 弹窗信息区域适配 */
  .popup-info {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 335px !important;
  }
}

/* 弹窗样式 */
.modify-popup-content {
  background-color: #ffffff;
  width: 100%;
  padding: 40rpx 30rpx 30rpx;
  border-radius: 20rpx 20rpx 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.popup-success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #1E90FF;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.popup-success-icon text {
  font-size: 80rpx;
  line-height: 80rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.popup-info {
  width: 100%;
  background-color: #f5f8ff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
  box-sizing: border-box;
}

/* 自适应小屏幕 */
@media screen and (max-width: 320px) {
  .popup-info-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 10rpx 0;
  }
  
  .popup-info-value {
    width: 100%;
    text-align: left;
    margin-top: 5rpx;
  }
}

.popup-info-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  font-size: 28rpx;
  line-height: 1.5;
}

.popup-info-label {
  color: #999;
  flex: 0 0 auto;
  margin-right: 20rpx;
}

.popup-info-value {
  color: #333;
  font-weight: 500;
  text-align: right;
  word-break: break-all;
  flex: 1;
}

/* 确保按钮在不同屏幕尺寸下均有良好显示 */
.popup-btn {
  width: 80%;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(to right, #1E90FF, #4682B4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  margin-top: 10rpx;
  outline: none;
}

/* 小屏幕设备适配 */
@media screen and (max-width: 340px) {
  .popup-btn {
    width: 90%;
    font-size: 28rpx;
  }
  
  .popup-success-icon {
    width: 100rpx;
    height: 100rpx;
  }
  
  .popup-success-icon text {
    font-size: 70rpx;
    line-height: 70rpx;
  }
  
  .popup-title {
    font-size: 30rpx;
  }
  
  .popup-info {
    padding: 15rpx;
  }
  
  .popup-info-item {
    font-size: 26rpx;
  }
}
</style> 